<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>权限分配</cite></a>
        <a><cite>重置密码</cite></a>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">重置密码</div>
        <div class="layui-card-body">
            <!-- 表格 -->
            <table id="reset-password-table-parseData" lay-filter="reset-password-table-parseData"></table>
            <!-- 右侧按钮 -->
            <script id="test-table-operate-barDemo" type="text/html">
                <a class="layui-btn layui-btn-xs" lay-event="edit">重置密码</a>
            </script>
        </div>
    </div>
</div>


<!-- 编辑按钮弹出框 -->
<script id="edit" type="text/html">
    <form class="layui-form" lay-filter="formEdit">
        <div class="layui-row">
            <div class="layui-col-md8 layui-col-md-offset1" style="display: none;">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">员工编号:</label>
                    <div class="layui-input-block">
                        <input type="text" name="id" required lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">登录密码:</label>
                    <div class="layui-input-block">
                        <input type="password" name="newPwd" required lay-verify="required" placeholder="登录密码"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-form-item">
                <div class="layui-col-md8 layui-col-md-offset4">
                    <div class="layui-form-item">
                        <button type="button" class="layui-btn" onclick="editShop()">确认</button>
                        <button type="button" class="layui-btn layui-btn-primary" onclick="closeLayer()">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>

<script>
    layui.use(['admin', 'table', 'form'], function () {
        var admin = layui.admin
            , table = layui.table
            , form = layui.form
            , baseUrl = layui.setter.baseUrl
            , $ = layui.$;

        // 表格渲染
        var tableIns = table.render({
            elem: '#reset-password-table-parseData'
            // 请求地址
            , url: baseUrl + 'emp_listByPage/listByPage'
            , toolbar: true
            , title: '重置密码表'
            , cellMinWidth: 120
            // 是否开启加载loding
            , loading: true
            // 数据渲染规定
            , cols: [[
                {field: 'uuid', title: '员工编号', width: 110}
                , {field: 'username', title: '登录名'}
                , {field: 'name', title: '真实姓名'}
                , {field: 'gender', title: '性别', templet: '<div>{{d.gender == 1 ? "男" : "女"}}</div>'}
                , {field: 'email', title: '邮件地址'}
                , {field: 'tele', title: '联系电话'}
                , {field: 'address', title: '联系地址'}
                , {field: 'birthday', title: '出生年月日'}
                , {field: 'depname', title: '部门编号'}
                , {title: '操作', toolbar: '#test-table-operate-barDemo', width: 100, fixed: 'right'}
            ]]
            // 开启分页
            , page: true
            , request: {
                pageName: 'page',
                limitName: 'rows'
            }
            , response: {
                // statusName: 'code',
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.rows //解析数据列表
                };
            }
        });
        table.on('row(reset-password-table-parseData)', function (obj) {
            let thisTr = obj.tr;
            let trs = obj.tr.parent().children();
            thisTr.css('background', '#FBEC88').siblings().css('background', '');
        });
        // 表格按钮功能设置
        table.on('tool(reset-password-table-parseData)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                layer.open({
                    title: "编辑",
                    type: 1,
                    move: false,
                    area: '500px',
                    content: $('#edit').html()
                });
                layui.form.val('formEdit', {
                    "id": data.uuid
                })
            }
        });
    });

    // 关闭弹框
    function closeLayer() {
        layer.closeAll();
    }

    // 编辑功能提交
    function editShop() {
        var data = layui.form.val("formEdit");

        layui.admin.req({
            url: layui.setter.baseUrl + 'emp_updatePwd_reset/update',
            type: 'post',
            data: data,
            done: function (res) {
                layer.closeAll();
                layer.open({
                    title: '重置密码'
                    , content: res.msg
                });
                layui.table.reload('reset-password-table-parseData');
            }
        })
    }
</script>

<style>
    .layui-col-md3,
    #reset-btn,
    #search-btn {
        margin-top: 10px;
    }
</style>